<!-- 初始化-> 现金流量期初数据-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">审核</div>
                            </div>
                        </a-col>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="12" class="clearfix" style="padding:0px;">
                        <a-icon type="vertical-right" class="field-first" title="首页" />
                        <a-icon type="left" class="field-prev" title="上一张" />
                        <a-icon type="right" class="field-next" title="下一张" />
                        <a-icon type="vertical-left" class="field-last" />
                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="credentials-wrapper" id="documents-wrapper">
                <h3 class="text-center" style="width:1000px">
                    <span class="text-name">现金流量期初数据</span><br>
                </h3>
                <section>
                    <div><span class="audit-status" v-show="voucherState==0">待审核</span><span class="audit-status" v-show="voucherState==1">已审</span></div>
                    <div class="table-box" style="width:1000px">
                        <a-table :columns="columns" :customRow="customClick" :data-source="dataSource" :pagination="false" :size="small" bordered>

                        </a-table>
                    </div>
                    <div class="edit-mask" v-show="editMask">
                        <!-- 遮罩（点击修改关闭遮罩） -->
                    </div>
                </section>

            </div>
            <div class="contextmenu-box">
                <!-- 右键菜单 -->
                <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
                    <li>新增行</li>
                    <li>删除行</li>
                    <li>复制行</li>
                </ul>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>

        <!--试算平衡-->
        <drag-modal title="期初试算平衡表" :visible="trialVisible" @cancel="()=>trialVisible=false">
            内容
        </drag-modal>
    </div>
</template>
<script>
export default {
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------

            customClick: (record, index) => ({
                on: {
                    contextmenu: (e) => {//右键事件
                        e.preventDefault();
                        if (record.number != "合计") {
                            this.openMenu(e);
                            console.log('右键点击的', index);
                            this.thisClickId = index;
                            this.thisClickRecord = record;
                        }
                    },
                    click: () => {
                        // console.log(record);
                    }
                },
            }),
            columns: [{
                title: '项目类别',
                dataIndex: 'period',
            }, {
                title: '现金流量项目',
                dataIndex: 'abstract',
            }, {
                title: '行次',
                dataIndex: 'name',
            }, {
                title: '金额',
                dataIndex: 'debitAmount',
            }],
            dataSource: [],
            trialVisible: false,
            confirmLoading: true,

        };
    },
    created () {
        this.getList();
    },
    methods: {
        getList () {
            let dataSource = [];
            for (let i = 0; i < 10; i++) {
                let array = {
                    period: `${i + 1}`,
                    abstract: `London No. Lake Park${i}`,
                    name: `${i}100`,
                    debitAmount: '1000',
                    sideAmount: '20',
                }
                dataSource.push(array);
            }
            this.dataSource = dataSource
        },
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        trialBalancing () {
            this.trialVisible = true;
        },
        handleCancel () {
            this.trialVisible = false;
        }
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';

    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .date-tp {
            text-align: center;
            margin-bottom: 10px;
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
        }
    }
</style>